<template>
  <div id="main1" style="height: 600px;width: 800px"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import request from "../../api/request";
import {ElLoading} from "element-plus/es";
import {ChannelApi, getVaccRatioTodaycountApi, TotalMonthApi} from "../../api/MyIndex";


onMounted(() => {
  getData()
})

const abscissa = ref([] as any)
const wholeTx = ref([] as any)
const zfb = ref([] as any)
const yh = ref([] as any)
const wx = ref([] as any)

/*const abscissa1 = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '123'])*/

function getData() {
  getVaccRatioTodaycountApi().then((response: any) => {
    wx.value = [...response.data.wx]
    yh.value = [...response.data.yh]
    zfb.value = [...response.data.zfb]
    abscissa.value = [...response.data.y]
    getChart()
  })

}

function getChart() {

  type EChartsOption = echarts.EChartsOption
  var chartDom = document.getElementById('main1')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    title: {
      text: '各个通道月提现次数'
    },
    tooltip: {
      trigger: 'axis',

    },
    legend: {
      data: ['总额', '微信', '支付宝', '银行']
    },
    xAxis: {
      type: 'category',
      data: abscissa.value,//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '总额',
        data: wholeTx.value,
        type: 'line',
        smooth: true,
        //areaStyle:{}
      }, {
        name: '微信',
        data: wx.value,
        type: 'line',
        smooth: true,
        //areaStyle:{}
      }, {
        name: '支付宝',
        data: zfb.value,
        type: 'line',
        smooth: true,
        //areaStyle:{}
      }, {
        name: '银行',
        data: yh.value,
        type: 'line',
        smooth: true,
        //areaStyle:{}
      },
    ]
  };

  option && myChart.setOption(option);
}

</script>

<style scoped>

</style>